<template>
  <div class='page'>
    <van-nav-bar :title='$t("m.header.login")' left-arrow @click-left='onBack' />
    <div class='login'>
      <van-cell-group>
        <van-field v-model='userAccount' required clearable left-icon='contact' :label='$t("m.login.name")' :placeholder='$t("m.login.nameHolder")' />
        <van-field v-model='userPasswd' left-icon='closed-eye' type='password' :label='$t("m.login.pwd")' :placeholder='$t("m.login.pwdHolder")' required />
      </van-cell-group>
      <van-button class='login_btn' size='small' round type='danger' @click='onLogin'>{{ $t('m.login.login') }}</van-button>
    </div>
    <div class='register' @click='toRegister'>{{ $t('m.tip.noUserToRegister') }}</div>
  </div>
</template>

<script>
import { Toast, NavBar, Cell, CellGroup, Button, Field } from 'vant'
import { strategies } from '@/utils/strategies.js'
import { mapActions, mapState } from 'vuex'

export default {
  metaInfo () {
    return {
      title: this.$t('m.meta.login.title'),
      meta: [
        {
          name: this.$t('m.meta.login.name'),
          content: this.$t('m.meta.login.content'),
        },
      ],
    }
  },
  data () {
    return {
      userAccount: '',
      userPasswd: '',
      backPath: this.$route.query.redirect,
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Field.name]: Field,
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    ...mapActions(['getLogin']),
    onLogin () {
      const userAccountEmpty = strategies.isNonEmpty(this.userAccount, this.$t('m.strategies.name'))
      const userPasswdLength = strategies.isNonEmpty(this.userPasswd, 4, this.$t('m.strategies.pwdLenth'))
      const result = userAccountEmpty || userPasswdLength
      if (result) {
        Toast({
          message: result,
          position: 'bottom',
        })
      } else {
        this.getLogin({
          user: this.userAccount,
          pwd: this.userPasswd,
          This: this,
        }).then(() => {
          if (this.backPath) {
            this.$router.go(-1)
            // this.$router.replace(`/${this.backPath}`)
            // this.$router.back()
            return
          }
          this.$router.push('/')
        })
      }
    },
    toRegister () {
      this.$router.push('/register')
    },
  },
  beforeMount () {
    console.log('login')
  },
  beforeRouteLeave (to, from, next) {
    next(() => {
      console.log(to)
    })
  },
}
</script>

<style lang='scss' scoped>
.page {
  background: #f2f3f5;
}

.login {
  text-align: center;
  margin-top: 94px;
  margin-left: 10px;
  margin-right: 10px;
}

.login_btn {
  margin: 20px;
  width: 100px;
}

.register {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  color: #ccc;
  font-size: 12px;
  text-align: center;
}
</style>
